// import 语句的路径只支持相对路径
import axios from '../../request/myAxios';

Page({

  // 用于实现加入购物车业务的商品数据
  goodsObj: {},

  data: {
    // 轮播图的数据
    pics: [],
    goods_id: 0,
    goods_name: '',
    goods_price: '',
    goods_introduce: '',
  },
  // 当页面加载时
  onLoad() {
    // 调用获取商品详情
    this.getGoodsDetail();
  },
  // 获取商品详情的封装
  getGoodsDetail() {
    // 也可通过页面的实例对象获取页面参数
    const goods_id = this.options.goods_id;
    axios({
      url: '/goods/detail',
      data: { goods_id }
    })
      .then(res => {
        // 从返回的数据中解构出来和页面渲染相关的数据
        let { goods_id, goods_name, goods_price, goods_introduce, pics } = res;

        // 给所有的 img 图片添加类名，因为小程序富文本不支持 img 标签选择器，只支持类名选择器
        goods_introduce = goods_introduce.replace(/<img/g, '<img class="my_img"');

        // 获取系统信息
        const { system } = wx.getSystemInfoSync();
        // 检测是否为 ios 平台
        if (system.toLocaleLowerCase().indexOf('ios') > -1) {
          // ios 平台要把 html 字符串中的 .webp 图片替换成 .jpg
          // g   全局匹配
          goods_introduce = goods_introduce.replace(/.webp/g, '.jpg');
        }

        // 更新到页面数据中，用于渲染视图
        this.setData({
          goods_id, goods_name, goods_price, goods_introduce, pics
        });

        // 点击加入购物车按钮是，需要的商品对象数据，不用于视图更新
        this.goodsObj = {
          goods_id,
          goods_name,
          goods_price,
          goods_small_logo: res.goods_small_logo
        };

      });
  },
  // 查看大图的封装
  showBigImage(e) {
    // 注意事项：使用的时候需要注意数据格式。
    const urls = this.data.pics.map(v => v.pics_big);
    // 获取点击事件传递过来的图片链接
    const { current } = e.currentTarget.dataset;
    // 调用 API 在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
    wx.previewImage({
      // 数组里面每个数据是图片链接
      urls,
      // 当前的图片链接
      current
    });
  },
  // 通过 JS API 跳转到购物车页
  goToPageCart() {
    wx.switchTab({ url: '/pages/cart/index' });
  },
  // 把当前商品加入购物车
  addToCart() {
    // 添加购物车按钮点击时，有两种情况：
    //    前提：获取本地存储中的购物车数据
    //    1. 商品不存在，把当前商品对象添加到购物车数组中
    //    2. 商品已经存在，购物车数量 +1

    // 获取本地存储中的购物车数据
    const cart = wx.getStorageSync('cart') || [];
    // findIndex 根据条件查找符合条件的数据的索引值
    const index = cart.findIndex(item => item.goods_id === this.goodsObj.goods_id);
    // 1. 商品不存在，把当前商品对象添加到购物车数组中
    if (index === -1) {
      console.log('第一次添加商品');
      // 初始化商品选中状态为 选中状态
      this.goodsObj.isSelect = true;
      // 初始化商品数量为 1
      this.goodsObj.count = 1;
      // 前添加到购物车数组列表中
      cart.unshift(this.goodsObj);
    }
    // 2. 商品已经存在，购物车数量 +1
    else {
      console.log('已经存在的商品累加数量');
      // 根据索引值，如何商品数量累加
      cart[index].count += 1;
    }
    // 把更新后的购物车数据保存到本地存储中
    wx.setStorageSync('cart', cart);

    // 小程序的消息提示框
    wx.showToast({
      // 提示文字
      title: '加入购物车成功',
      // 不需要 icon
      icon: 'none',
      // 提示持续时间
      duration: 1000,
      // 透明蒙层 - 提示消失前，页面无法进行其他操作
      mask: true
    });

  },
  // 立即购买按钮 - 整个登录，支付流程走完后，才知道怎么实现 - 大家以后自己完成
  buyNow() {
    wx.showToast({
      title: '功能完善中',
      icon: 'none',
    });
  }

});